import * as THREE from "three";

export const OpeningAnimation = {
    methods:{
        async openingAnimation(){
            this.loading = true;
            this.hidePointer3dLabel() ;
             var Group  = new THREE.Group() ;
            var resource = new THREE.Group() ;
            let usFontAnimation,suAnimation,no1Animation,westEuFontAnimation,eastEuFontAnimation,natLogoAnimation;
            Group.name = "Jb" ;
            this.scene.add(Group) ;

            /////////////////////////////      加载资源       /////////////////////////////
            var natoImg = this.create3dImages();
            natoImg.name = "3dImage"
            resource.add(natoImg)
            // 美国文字
            let UnitedStateFontModel = this.gltfLoadModel("model/public/font/UnitedState/scene.gltf");
            await UnitedStateFontModel.then((res)=>{
                usFontAnimation = res.animations[0];
                let font = res.scene;
                font.name = "UnitedStateFont"
                resource.add(font)
            })

            // 苏联文字
            let SovietUnionFontModel = this.gltfLoadModel("model/public/font/SovietUnion/scene.gltf");
            await SovietUnionFontModel.then((res)=>{
                suAnimation = res.animations[0];
                let font = res.scene;
                font.name = "SovietUnion"
                resource.add(font)
            })

            // No1模型
            let No1FontModel = this.gltfLoadModel("model/public/font/No1/scene.gltf")
            No1FontModel.then((res)=>{
                no1Animation = res.animations[0];
                let font = res.scene;
                font.name = "No1"
                resource.add(font)
            })

            var natoLabel = this.get3dLabel("北大西洋公约组织", false, "150px");
            var natoLogoModel = this.gltfLoadModel("model/nato/natoLogoGltf/scene.gltf");
            await natoLogoModel.then((res) => {
                natLogoAnimation = res.animations[0];
                res.scene.position.set(-130, 40, -40)
                res.scene.scale.set(2, 2, 2)
                natoLabel.position.set(0, 8, 0)
                res.scene.add(natoLabel);
                res.scene.name = "natoLogoModel"
                resource.add(res.scene)
            })

            var westEuFont = this.gltfLoadModel("model/public/font/West Eu/scene.gltf")
            await westEuFont.then((res) => {
                westEuFontAnimation = res.animations[0];
                res.scene.scale.set(10, 10, 10);
                res.scene.name = "WestEu"
                resource.add(res.scene)
            })

            // 东欧模型
            var eastEuFont = this.gltfLoadModel("model/public/font/East Eu/scene.gltf")
            await eastEuFont.then((res) => {
                eastEuFontAnimation = res.animations[0];
                res.scene.scale.set(10, 10, 10);
                res.scene.name = "EastEu"
                resource.add(res.scene)
            })

            // 加载完毕
            this.loading = false;
            /////////////////////////////      脚本动画       /////////////////////////////

            // 台词
            this.openingAnimationProptText()
            // 背景音乐播放
            this.$refs.Lines.src = "music/lines/opening/0-2.mp3" ;
            this.$refs.Lines.play();

            // 镜头移动
            let newCamPos = {x:-56.52076037649301,y:304.8765545873199,z:83.27243896691773} ;
            let newTarPos = {x:-56.52076037649301,y:0,z:0}
            this.animateCamera(this.camera.position,this.controls.target,newCamPos,newTarPos,2000)
            // 文字美国出现
            setTimeout(()=>{
                this.colorMap("United States",this.myColor.natoArea) ;
                let font = resource.getObjectByName("UnitedStateFont");
                font.position.set(-132.76736828903847,4,0) ;
                font.scale.set(1.2,1.2,1.2) ;
                Group.add(font)
                this.onceActionPlay(usFontAnimation,font)
            },1200)

            setTimeout(() => {
                let WestEu = resource.getObjectByName("WestEu");
                WestEu.position.set(2, 5, -20)
                WestEu.rotateX(-Math.PI * 0.5)
                WestEu.rotateZ(-Math.PI * 0.3)
                Group.add(WestEu)
                this.onceActionPlay(westEuFontAnimation, WestEu)
            }, 4200)


            setTimeout(()=>{
                let newCamPos = {x:0,y:261.33896525352026,z:293.76672406243665} ;
                let newTarPos = {x:0,y:0,z:0} ;
                this.animateCamera(this.camera.position,this.controls.target,newCamPos,newTarPos,2000);
            },7000)

            setTimeout(()=>{
                let natoLogo = resource.getObjectByName("natoLogoModel");
                Group.add(natoLogo)
                this.onceActionPlay(natLogoAnimation,natoLogo);
                this.initNatoMap()
            },8000)

            setTimeout(()=>{
                let font = resource.getObjectByName("SovietUnion") ;
                font.position.set(135.9585910513511,4,-54.09978136677441) ;
                font.scale.set(1.8,1.8,1.8) ;
                Group.add(font) ;
                this.onceActionPlay(suAnimation,font)
                setTimeout(()=>{
                    this.colorMap("Soviet Union",this.myColor.wtoArea)
                },1000)
            },13000)

            setTimeout(()=>{
                let EastEu = resource.getObjectByName("EastEu");
                EastEu.position.set(25, 4, -20)
                EastEu.rotateX(-Math.PI * 0.5)
                Group.add(EastEu)
                this.onceActionPlay(eastEuFontAnimation, EastEu)
                setTimeout(()=>{
                    this.initWtoColor()
                },1000)
            },14000)


            setTimeout(()=>{
                let newCamPos = {x:0,y:461.33896525352026,z:0} ;
                let newTarPos = {x:0,y:0,z:0} ;
                this.animateCamera(this.camera.position,this.controls.target,newCamPos,newTarPos,3000);
            },15000)

            setTimeout(()=>{
                let natoLogoImage = resource.getObjectByName("3dImage") ;
                console.log(natoLogoImage)
                natoLogoImage.scale.set(0.2,0.2,0.2);
                natoLogoImage.position.set(-40,0,-20)
                natoLogoImage.rotateX(Math.PI * 0.5)
                Group.add(natoLogoImage)
                setTimeout(()=>{
                    this.show3dImage()
                    this.showPointer3dLabel()
                },1000)
            },17000)
        }
    }
}